<template>
  <el-scrollbar height="calc(100vh - 70px)">
	<div class='create_step'>
		  <el-form :model="stepForm">
			<div class='action'>
				<el-form-item>
				      <el-button type="primary" @click="()=>{this.$router.push({name: 'step'})}">返回</el-button>
				      <el-button type="primary" @click='saveStep'>保存</el-button>
				</el-form-item>
			</div>
			<div class='interface_info'>
				<el-divider content-position="left">步骤基本信息</el-divider>
				<el-form :inline="true">
					<el-form-item label="步骤名称">
						<el-input v-model="stepForm.name"></el-input>
					</el-form-item>
					<el-form-item label="所属模块">
						<el-cascader collapse-tags v-model='stepForm.module' :options="plant_module_list" :props="editProps" clearable  style="width: 100%;"/>
					</el-form-item>
				</el-form>
			</div>
			<el-divider content-position="left">步骤详细信息</el-divider>
			<ComStep :keyData='stepForm.steps' :actionKeys='actions'></ComStep>
		  </el-form>
	</div>
  </el-scrollbar>
  
  
</template>

<script>
import {mapState, mapActions, mapGetters} from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'
import { View, Delete, Edit, Plus, EditPen, CopyDocument, Top, Bottom} from '@element-plus/icons-vue'
import BodyEdit from '../../components/BodyEdit.vue'
import KeyTable from '../../components/KeyTable.vue'
import Extract from '../../components/Extract.vue'
import Check from '../../components/Check.vue'
import ComStep from '../../components/ComStep.vue'

export default{
	setup() {
		return {
			Edit,
			Delete,
			Plus,
			View,
			EditPen,
			CopyDocument,
			Top,
			Bottom,
		}
	},
	components: {
		BodyEdit,
		KeyTable,
		Extract,
		Check,
		ComStep,
	},
	data() {
		return {
			editProps:{
				emitPath: false,
				value: 'id',
				label: 'name',
			},
			paramsData: [],
			plant_module_list: [],
			data: [],
			json_row_data: {
				key: '',
				// 0 固定值， 1 Faker
				generate: 0,
				type: 'Str',
				value: '',
				
			},
			bodyType: 'json',
			showEdit: false,
			position: 'top',
			actions: [],
			stepForm:{
				project: '',
				id: '',
				module: '',
				name: '',
				steps: [],
			},
		}
	},
	computed:{
		...mapState(['projectInfo']),
	},
	methods: {
		saveStep(){
			if(this.$route.query.id && this.$route.name === 'stepEdit'){
				this.updateStep()
			}else{
				this.createStep()
			}
		},
		async getPlantModule(){
			const response = await this.$api.getAllPlantModule({project: this.projectInfo.id})
			if (response.status === 200){
				this.plant_module_list = response.data.results
			}
		},
		async createStep(){
			this.stepForm.project = this.projectInfo.id
			const response = await this.$api.createStep(this.stepForm)
			if (response.status === 201){
				this.$router.push({name: 'step'})
			}
		},
		async updateStep(){
			const response = await this.$api.updateStep(this.stepForm.id, this.stepForm)
			if (response.status === 200){
				this.$router.push({name: 'step'})
			}
		},
		async getStep(id){
			const response = await this.$api.getStep(id)
			if (response.status === 200){
				this.stepForm = response.data.result
			}
		},
		async getActions(){
			const response = await this.$api.getActions({project: this.projectInfo.id})
			if (response.status === 200){
				this.actions = response.data.results
			}
		},
	},
	created() {
		if(this.$route.query.id){
			this.getStep(this.$route.query.id)
		}
		this.getPlantModule()
		this.getActions()
	}
}

</script>

<style scoped>
	.action{
		float: right;
	}
	.create_step{
		margin: 20px 20px; 
	}
	.interface_info{
		clear: both;
		/* margin-bottom: 40px; */
	}
	.create_step .el-input-group__append{
		background-color: white;
		box-shadow: none;
		border: none;
		/* padding: 0px; */
	}
	.script{
		text-align: center;
	}
	.script .el-button{
		width: 100px;
	}
	.json{
		overflow-x: hidden;
	}
</style>